

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Blog - React</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Blog - React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/blog/page2/">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="//cdn.bootcss.com/docsearch.js/1.3.0/docsearch.min.css" />
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
  <![endif]-->

  <script src="//cdn.bootcss.com/docsearch.js/1.5.0/docsearch.min.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/codemirror.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/javascript/javascript.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/xml/xml.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/jsx/jsx.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
  <script src="//cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>

  <script src="/react/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/react/">
      <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/react/docs/hello-world.html">Docs</a></li>
        <li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/react/community/support.html">Community</a></li>
        <li><a href="/react/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v15.5.4</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/react/blog/2017/04/07/react-v15.5.0.html">React v15.5.0</a></li>
      
        <li><a href="/react/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/react/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/react/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/react/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/react/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/react/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/react/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/react/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
      <li><a href="/react/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

  <div class="inner-content">
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a>

</h1>

<p class="meta">
  July 13, 2016
  by
  
    
      <a href="https://twitter.com/dan_abramov">Dan Abramov</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.</p>

<p>It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.</p>

<p>To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.</p>

<p>Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.</p>

<p>In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.</p>

<h2>Why Mixins are Broken</h2>

<p>At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.</p>

<p>However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the <a href="https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750">same conclusions</a> after writing my fair share of terrible mixins.</p>

<p>This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.</p>

<h3>Mixins introduce implicit dependencies</h3>

<p>Sometimes a component relies on a certain method defined in the mixin, such as <code>getClassName()</code>. Sometimes it’s the other way around, and mixin calls a method like <code>renderHeader()</code> on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.</p>

<p>Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?</p>

<p>These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s <code>render()</code> method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.</p>

<p>Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.</p>

<h3>Mixins cause name clashes</h3>

<p>There is no guarantee that two particular mixins can be used together. For example, if <code>FluxListenerMixin</code> defines <code>handleChange()</code> and <code>WindowSizeMixin</code> defines <code>handleChange()</code>, you can’t use them together. You also can’t define a method with this name on your own component.</p>

<p>It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.</p>

<p>If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.</p>

<p>The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.</p>

<h3>Mixins cause snowballing complexity</h3>

<p>Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.</p>

<p>A component needs some state to track mouse hover. To keep this logic reusable, you might extract <code>handleMouseEnter()</code>, <code>handleMouseLeave()</code> and <code>isHovering()</code> into a <code>HoverMixin</code>. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in <code>HoverMixin</code> so they create a <code>TooltipMixin</code> that uses <code>HoverMixin</code>. <code>TooltipMixin</code> reads <code>isHovering()</code> provided by <code>HoverMixin</code> in its <code>componentDidUpdate()</code> and either shows or hides the tooltip.</p>

<p>A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called <code>getTooltipOptions()</code> to <code>TooltipMixin</code>. By this time, components that show popovers also use <code>HoverMixin</code>. However popovers need a different hover delay. To solve this, somebody adds support for an optional <code>getHoverOptions()</code> method and implements it in <code>TooltipMixin</code>. Those mixins are now tightly coupled.</p>

<p>This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling <code>TooltipMixin</code> from <code>HoverMixin</code>. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.</p>

<p>Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.</p>

<p>These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.</p>

<h2>Migrating from Mixins</h2>

<p>Let’s make it clear that mixins are not technically deprecated. If you use <code>React.createClass()</code>, you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.</p>

<p>Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.</p>

<p>We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!</p>

<h3>Performance Optimizations</h3>

<p>One of the most commonly used mixins is <a href="/react/docs/pure-render-mixin.html"><code>PureRenderMixin</code></a>. You might be using it in some components to <a href="/react/docs/advanced-performance.html#shouldcomponentupdate-in-action">prevent unnecessary re-renders</a> when the props and state are shallowly equal to the previous props and state:</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">PureRenderMixin</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-addons-pure-render-mixin&#39;</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">PureRenderMixin</span><span class="p">],</span>

  <span class="c1">// ...</span>

<span class="p">});</span>
</code></pre></div>
<h4>Solution</h4>

<p>To express the same without mixins, you can use the <a href="/react/docs/shallow-compare.html"><code>shallowCompare</code></a> function directly instead:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">shallowCompare</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;react-addons-shallow-compare&#39;</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">shouldComponentUpdate</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">shallowCompare</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">nextProps</span><span class="p">,</span> <span class="nx">nextState</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="c1">// ...</span>

<span class="p">});</span>
</code></pre></div>
<p>If you use a custom mixin implementing a <code>shouldComponentUpdate</code> function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.</p>

<p>We understand that more typing can be annoying. For the most common case, we plan to <a href="https://github.com/facebook/react/pull/7195">introduce a new base class</a> called <code>React.PureComponent</code> in the next minor release. It uses the same shallow comparison as <code>PureRenderMixin</code> does today.</p>

<h3>Subscriptions and Side Effects</h3>

<p>The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in <code>componentDidMount</code>, destroyed in <code>componentWillUnmount</code>, and the change handler calls <code>this.setState()</code>.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">SubscriptionMixin</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span>
      <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
    <span class="p">};</span>
  <span class="p">},</span>

  <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
      <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
    <span class="p">});</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">SubscriptionMixin</span><span class="p">],</span>

  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Reading comments from state managed by mixin.</span>
    <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span>
        <span class="p">})}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">CommentList</span><span class="p">;</span>
</code></pre></div>
<h4>Solution</h4>

<p>If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.</p>

<p>If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called <a href="https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750">“higher-order components”</a>. It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.</p>

<h4>Higher-Order Components Explained</h4>

<p>Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">addAndLog</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
  <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">multiplyAndLog</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span>
  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
  <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div>
<p>These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.</p>

<p>Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a <a href="https://en.wikipedia.org/wiki/Higher-order_function">higher-order function</a>, that is, a function that takes a function as an argument and returns a function.</p>

<p>Again, it sounds more intimidating than it really is:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">wrappedFunction</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// Return a function with the same API...</span>
  <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// ... that calls the original function</span>
    <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">wrappedFunction</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
    <span class="c1">// ... but also logs its result!</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
  <span class="p">};</span>
<span class="p">}</span>
</code></pre></div>
<p>The <code>withLogging</code> higher-order function lets us write <code>add</code> and <code>multiply</code> without the logging statements, and later wrap them to get <code>addAndLog</code> and <code>multiplyAndLog</code> with exactly the same signatures as before:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">multiply</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">x</span> <span class="o">*</span> <span class="nx">y</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">wrappedFunction</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="kd">function</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">wrappedFunction</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;result:&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
    <span class="k">return</span> <span class="nx">result</span><span class="p">;</span>
  <span class="p">};</span>
<span class="p">}</span>

<span class="c1">// Equivalent to writing addAndLog by hand:</span>
<span class="kd">var</span> <span class="nx">addAndLog</span> <span class="o">=</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">add</span><span class="p">);</span>

<span class="c1">// Equivalent to writing multiplyAndLog by hand:</span>
<span class="kd">var</span> <span class="nx">multiplyAndLog</span> <span class="o">=</span> <span class="nx">withLogging</span><span class="p">(</span><span class="nx">multiply</span><span class="p">);</span>
</code></pre></div>
<p>Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.</p>

<p>As a first step, we will split our <code>CommentList</code> component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This is a child component.</span>
<span class="c1">// It only renders the comments it receives as props.</span>
<span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// Note: now reading from props rather than state.</span>
    <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span>
        <span class="p">})}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="c1">// This is a parent component.</span>
<span class="c1">// It subscribes to the data source and renders &lt;CommentList /&gt;.</span>
<span class="kd">var</span> <span class="nx">CommentListWithSubscription</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">{</span>
      <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
    <span class="p">};</span>
  <span class="p">},</span>

  <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
      <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
    <span class="p">});</span>
  <span class="p">},</span>

  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// We pass the current state as props to CommentList.</span>
    <span class="k">return</span> <span class="o">&lt;</span><span class="nx">CommentList</span> <span class="nx">comments</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">comments</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">CommentListWithSubscription</span><span class="p">;</span>
</code></pre></div>
<p>There is just one final step left to do.</p>

<p>Remember how we made <code>withLogging()</code> take a function and return another function wrapping it? We can apply a similar pattern to React components.</p>

<p>We will write a new function called <code>withSubscription(WrappedComponent)</code>. Its argument could be any React component. We will pass <code>CommentList</code> as <code>WrappedComponent</code>, but we could also apply <code>withSubscription()</code> to any other component in our codebase.</p>

<p>This function would return another component. The returned component would manage the subscription and render <code>&lt;WrappedComponent /&gt;</code> with the current data.</p>

<p>We call this pattern a “higher-order component”.</p>

<p>The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with <code>createClass()</code>, as an ES6 class or a function. If <code>WrappedComponent</code> is a React component, the component created by <code>withSubscription()</code> can render it.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// This function takes a component...</span>
<span class="kd">function</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">WrappedComponent</span><span class="p">)</span> <span class="p">{</span>
  <span class="c1">// ...and returns another component...</span>
  <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
    <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">return</span> <span class="p">{</span>
        <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
      <span class="p">};</span>
    <span class="p">},</span>

    <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// ... that takes care of the subscription...</span>
      <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
        <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
      <span class="p">});</span>
    <span class="p">},</span>

    <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// ... and renders the wrapped component with the fresh data!</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">WrappedComponent</span> <span class="nx">comments</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">comments</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">});</span>
<span class="p">}</span>
</code></pre></div>
<p>Now we can declare <code>CommentListWithSubscription</code> by applying <code>withSubscription</code> to <code>CommentList</code>:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">CommentList</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span>
        <span class="p">})}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="c1">// withSubscription() returns a new component that</span>
<span class="c1">// is subscribed to the data source and renders</span>
<span class="c1">// &lt;CommentList /&gt; with up-to-date data.</span>
<span class="kd">var</span> <span class="nx">CommentListWithSubscription</span> <span class="o">=</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">CommentList</span><span class="p">);</span>

<span class="c1">// The rest of the app is interested in the subscribed component</span>
<span class="c1">// so we export it instead of the original unwrapped CommentList.</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">CommentListWithSubscription</span><span class="p">;</span>
</code></pre></div>
<h4>Solution, Revisited</h4>

<p>Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">WrappedComponent</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
    <span class="nx">getInitialState</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">return</span> <span class="p">{</span>
        <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
      <span class="p">};</span>
    <span class="p">},</span>

    <span class="nx">componentDidMount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">DataSource</span><span class="p">.</span><span class="nx">addChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">componentWillUnmount</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="nx">DataSource</span><span class="p">.</span><span class="nx">removeChangeListener</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">handleChange</span><span class="p">);</span>
    <span class="p">},</span>

    <span class="nx">handleChange</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span>
        <span class="nx">comments</span><span class="o">:</span> <span class="nx">DataSource</span><span class="p">.</span><span class="nx">getComments</span><span class="p">()</span>
      <span class="p">});</span>
    <span class="p">},</span>

    <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// Use JSX spread syntax to pass all props and state down automatically.</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">WrappedComponent</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">});</span>
<span class="p">}</span>

<span class="c1">// Optional change: convert CommentList to a functional component</span>
<span class="c1">// because it doesn&#39;t use lifecycle hooks or state.</span>
<span class="kd">function</span> <span class="nx">CommentList</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
  <span class="kd">var</span> <span class="nx">comments</span> <span class="o">=</span> <span class="nx">props</span><span class="p">.</span><span class="nx">comments</span><span class="p">;</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="p">{</span><span class="nx">comments</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">comment</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="o">&lt;</span><span class="nx">Comment</span> <span class="nx">comment</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">}</span> <span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">comment</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span> <span class="o">/&gt;</span>
      <span class="p">})}</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span>
  <span class="p">)</span>
<span class="p">}</span>

<span class="c1">// Instead of declaring CommentListWithSubscription,</span>
<span class="c1">// we export the wrapped component right away.</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">withSubscription</span><span class="p">(</span><span class="nx">CommentList</span><span class="p">);</span>
</code></pre></div>
<p>Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.</p>

<p>Like any solution, higher-order components have their own pitfalls. For example, if you heavily use <a href="/react/docs/more-about-refs.html">refs</a>, you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding <a href="https://github.com/facebook/react/issues/4213">ref forwarding</a> to React to solve this annoyance.</p>

<h3>Rendering Logic</h3>

<p>The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.</p>

<p>Here is a typical example of this pattern:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">RowMixin</span> <span class="o">=</span> <span class="p">{</span>
  <span class="c1">// Called by components from render()</span>
  <span class="nx">renderHeader</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s1">&#39;row-header&#39;</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span>
          <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">getHeaderText</span><span class="p">()</span> <span class="cm">/* Defined by components */</span><span class="p">}</span>
        <span class="o">&lt;</span><span class="err">/h1&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">UserRow</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">RowMixin</span><span class="p">],</span>

  <span class="c1">// Called by RowMixin.renderHeader()</span>
  <span class="nx">getHeaderText</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">fullName</span><span class="p">;</span>
  <span class="p">},</span>

  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">renderHeader</span><span class="p">()</span> <span class="cm">/* Defined by RowMixin */</span><span class="p">}</span>
        <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">biography</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h2&gt;</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<p>Multiple components may be sharing <code>RowMixin</code> to render the header, and each of them would need to define <code>getHeaderText()</code>.</p>

<h4>Solution</h4>

<p>If you see rendering logic inside a mixin, it’s time to extract a component!</p>

<p>Instead of <code>RowMixin</code>, we will define a <code>&lt;RowHeader&gt;</code> component. We will also replace the convention of defining a <code>getHeaderText()</code> method with the standard mechanism of top-data flow in React: passing props.</p>

<p>Finally, since neither of those components currently need lifecycle hooks or state, we can declare them as simple functions:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">RowHeader</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="s1">&#39;row-header&#39;</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">text</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h1&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span>
  <span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">UserRow</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">RowHeader</span> <span class="nx">text</span><span class="o">=</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">fullName</span><span class="p">}</span> <span class="o">/&gt;</span>
      <span class="o">&lt;</span><span class="nx">h2</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">props</span><span class="p">.</span><span class="nx">user</span><span class="p">.</span><span class="nx">biography</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/h2&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span>
  <span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p>Props keep component dependencies explicit, easy to replace, and enforceable with tools like <a href="https://flowtype.org/">Flow</a> and <a href="https://www.typescriptlang.org/">TypeScript</a>.</p>

<blockquote>
<p><strong>Note:</strong></p>

<p>Defining components as functions is not required. There is also nothing wrong with using lifecycle hooks and state—they are first-class React features. We use functional components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.</p>
</blockquote>

<h3>Context</h3>

<p>Another group of mixins we discovered were helpers for providing and consuming <a href="/react/docs/context.html">React context</a>. Context is an experimental unstable feature, has <a href="https://github.com/facebook/react/issues/2517">certain issues</a>, and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.</p>

<p>Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">RouterMixin</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">contextTypes</span><span class="o">:</span> <span class="p">{</span>
    <span class="nx">router</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">isRequired</span>
  <span class="p">},</span>

  <span class="c1">// The mixin provides a method so that components</span>
  <span class="c1">// don&#39;t have to use the context API directly.</span>
  <span class="nx">push</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">path</span><span class="p">)</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">Link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">RouterMixin</span><span class="p">],</span>

  <span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>

    <span class="c1">// This method is defined in RouterMixin.</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">to</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/a&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">Link</span><span class="p">;</span>
</code></pre></div>
<h4>Solution</h4>

<p>We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.</p>

<p>Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">function</span> <span class="nx">withRouter</span><span class="p">(</span><span class="nx">WrappedComponent</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
    <span class="nx">contextTypes</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">router</span><span class="o">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">PropTypes</span><span class="p">.</span><span class="nx">object</span><span class="p">.</span><span class="nx">isRequired</span>
    <span class="p">},</span>

    <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
      <span class="c1">// The wrapper component reads something from the context</span>
      <span class="c1">// and passes it down as a prop to the wrapped component.</span>
      <span class="kd">var</span> <span class="nx">router</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">router</span><span class="p">;</span>
      <span class="k">return</span> <span class="o">&lt;</span><span class="nx">WrappedComponent</span> <span class="p">{...</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="nx">router</span><span class="o">=</span><span class="p">{</span><span class="nx">router</span><span class="p">}</span> <span class="o">/&gt;</span><span class="p">;</span>
    <span class="p">}</span>
  <span class="p">});</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">Link</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">handleClick</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>

    <span class="c1">// The wrapped component uses props instead of context.</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">to</span><span class="p">);</span>
  <span class="p">},</span>

  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">a</span> <span class="nx">onClick</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">handleClick</span><span class="p">}</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/a&gt;</span>
    <span class="p">);</span>
  <span class="p">}</span>
<span class="p">});</span>

<span class="c1">// Don&#39;t forget to wrap the component!</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="nx">withRouter</span><span class="p">(</span><span class="nx">Link</span><span class="p">);</span>
</code></pre></div>
<p>If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.</p>

<h3>Utility Methods</h3>

<p>Sometimes, mixins are used solely to share utility functions between components:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">ColorMixin</span> <span class="o">=</span> <span class="p">{</span>
  <span class="nx">getLuminance</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="mi">16</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&amp;</span> <span class="mh">0xFF0000</span><span class="p">)</span> <span class="o">&gt;&gt;</span> <span class="mi">16</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">g</span> <span class="o">=</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&amp;</span> <span class="mh">0x00FF00</span><span class="p">)</span> <span class="o">&gt;&gt;</span> <span class="mi">8</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">b</span> <span class="o">=</span> <span class="p">(</span><span class="nx">c</span> <span class="o">&amp;</span> <span class="mh">0x0000FF</span><span class="p">);</span>
    <span class="k">return</span> <span class="p">(</span><span class="mf">0.299</span> <span class="o">*</span> <span class="nx">r</span> <span class="o">+</span> <span class="mf">0.587</span> <span class="o">*</span> <span class="nx">g</span> <span class="o">+</span> <span class="mf">0.114</span> <span class="o">*</span> <span class="nx">b</span><span class="p">);</span>
  <span class="p">}</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">mixins</span><span class="o">:</span> <span class="p">[</span><span class="nx">ColorMixin</span><span class="p">],</span>

  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">theme</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">getLuminance</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">160</span> <span class="o">?</span> <span class="s1">&#39;dark&#39;</span> <span class="o">:</span> <span class="s1">&#39;light&#39;</span><span class="p">;</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">theme</span><span class="p">}</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h4>Solution</h4>

<p>Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">getLuminance</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../utils/getLuminance&#39;</span><span class="p">);</span>

<span class="kd">var</span> <span class="nx">Button</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">createClass</span><span class="p">({</span>
  <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">theme</span> <span class="o">=</span> <span class="nx">getLuminance</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">color</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">160</span> <span class="o">?</span> <span class="s1">&#39;dark&#39;</span> <span class="o">:</span> <span class="s1">&#39;light&#39;</span><span class="p">;</span>
    <span class="k">return</span> <span class="p">(</span>
      <span class="o">&lt;</span><span class="nx">div</span> <span class="nx">className</span><span class="o">=</span><span class="p">{</span><span class="nx">theme</span><span class="p">}</span><span class="o">&gt;</span>
        <span class="p">{</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">}</span>
      <span class="o">&lt;</span><span class="err">/div&gt;</span>
    <span class="p">)</span>
  <span class="p">}</span>
<span class="p">});</span>
</code></pre></div>
<h3>Other Use Cases</h3>

<p>Sometimes people use mixins to selectively add logging to lifecycle hooks in some components. In the future, we intend to provide an <a href="https://github.com/facebook/react/issues/5306">official DevTools API</a> that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.</p>

<p>If you can’t accomplish something with a component, a higher-order component, or a utility module, it could be mean that React should provide this out of the box. <a href="https://github.com/facebook/react/issues/new">File an issue</a> to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.</p>

<p>Mixins are not deprecated in the traditional sense. You can keep using them with <code>React.createClass()</code>, as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split <code>React.createClass()</code> into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.</p>

<p>We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.</p>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a>

</h1>

<p class="meta">
  July 11, 2016
  by
  
    
      <a href="https://twitter.com/keyanzhang">Keyan Zhang</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.</p>

<p>Prior to this release, we stripped out error messages at build-time and this is why you might have seen this message in production:</p>

<blockquote>
<p>Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.</p>
</blockquote>

<p>In order to make debugging in production easier, we&#39;re introducing an Error Code System in <a href="https://github.com/facebook/react/releases/tag/v15.2.0">15.2.0</a>. We developed a <a href="https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js">gulp script</a> that collects all of our <code>invariant</code> error messages and folds them to a <a href="https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json">JSON file</a>, and at build-time Babel uses the JSON to <a href="https://github.com/facebook/react/blob/master/scripts/error-codes/dev-expression-with-codes.js">rewrite</a> our <code>invariant</code> calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.</p>

<p>While we hope you don&#39;t see errors often, you can see how it works <a href="/react/docs/error-decoder.html?invariant=109&amp;args%5B%5D=Foo">here</a>. This is what the same error from above will look like:</p>

<blockquote>
<p>Minified React error #109; visit https://facebook.github.io/react/docs/error-decoder.html?invariant=109&amp;args[]=Foo for the full message or use the non-minified dev environment for full errors and additional helpful warnings.</p>
</blockquote>

<p>We do this so that the developer experience is as good as possible, while also keeping the production bundle size as small as possible. This feature shouldn&#39;t require any changes on your side — use the <code>min.js</code> files in production or bundle your application code with <code>process.env.NODE_ENV === &#39;production&#39;</code> and you should be good to go!</p>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a>

</h1>

<p class="meta">
  April  8, 2016
  by
  
    
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we&#39;ve been working since then to make sure we get fixes into your hands as quickly as possible.</p>

<p>The first of these issues is related to the removal of an undocumented API. This API was added to enable <a href="/react/docs/jsx-spread.html">JSX Spread Attributes</a> in our JS compile tools (react-tools, JSXTransformer) before <code>Object.assign</code> was standard. When we stopped supporting these tools last year, we kept the API there to catch the longer tail of people using those tools. Meanwhile we moved to using Babel and encouraged others to do the same. Babel will typically compile the spread use to an <code>_extends</code> helper, which will use <code>Object.assign</code>. We did not properly research other compilation tools before deciding to remove the API in v15. Specifically, TypeScript and coffee-react are two popular packages using <code>React.__spread</code>, as well as reactify which still makes use react-tools. In order to make sure that code compiled with these tools is not broken, we will be restoring the <code>React.__spread</code> API and adding a warning. It will be removed in the future so if you maintain a project making using of it, we encourage you to compile to <code>Object.assign</code> directly or a similar helper function.</p>

<p>The second issue resulted in cursor position being lost in controlled inputs. We merged a pull request earlier this week to fix a separate regression from v0.14. Our goal was to target <code>&lt;option&gt;</code> elements but we ended up targeting all interactions with <code>value</code> properties. Unfortunately we didn&#39;t test it as thoroughly as we thought. We backed out the offending change and fixed the issue in different way which doesn&#39;t have the same problem.</p>

<p>We apologize if you installed 15.0.0 and have encountered these issues yourselves.</p>

<p>As usual, you can get install the <code>react</code> package via npm or download a browser bundle.</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-15.0.1.js">https://fb.me/react-15.0.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-15.0.1.min.js">https://fb.me/react-15.0.1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-15.0.1.js">https://fb.me/react-with-addons-15.0.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-15.0.1.min.js">https://fb.me/react-with-addons-15.0.1.min.js</a><br></li>
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-15.0.1.js">https://fb.me/react-dom-15.0.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-15.0.1.min.js">https://fb.me/react-dom-15.0.1.min.js</a><br></li>
</ul>

<h2>Changelog</h2>

<h3>React</h3>

<ul>
<li>Restore <code>React.__spread</code> API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.<br>
<small><a href="https://github.com/zpao">@zpao</a> in <a href="https://github.com/facebook/react/pull/6444">#6444</a></small></li>
</ul>

<h3>ReactDOM</h3>

<ul>
<li>Fixed issue resulting in loss of cursor position in controlled inputs.<br>
<small><a href="https://github.com/spicyj">@spicyj</a> in <a href="https://github.com/facebook/react/pull/6449">#6449</a></small></li>
</ul>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/04/07/react-v15.html">React v15.0</a>

</h1>

<p class="meta">
  April  7, 2016
  by
  
    
      <a href="https://twitter.com/dan_abramov">Dan Abramov</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>We would like to thank the React community for reporting issues and regressions in the release candidates on our <a href="https://github.com/facebook/react/issues/">issue tracker</a>. Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.</p>

<p>As a reminder, <a href="/react/blog/2016/02/19/new-versioning-scheme.html">we’re switching to major versions</a> to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that <a href="/react/blog/2016/01/12/discontinuing-ie8-support.html">we no longer actively support Internet Explorer 8</a>. We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.</p>

<p>React 15 brings significant improvements to how we interact with the DOM:</p>

<ul>
<li><p>We are now using <code>document.createElement</code> instead of setting <code>innerHTML</code> when mounting components. This allows us to get rid of the <code>data-reactid</code> attribute on every node and make the DOM lighter. Using <code>document.createElement</code> is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.</p></li>
<li><p>Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we <a href="https://github.com/facebook/react/pull/6243">added support for all the SVG attributes that are recognized by today’s browsers</a>. If we missed any of the attributes you’d like to use, please <a href="https://github.com/facebook/react/issues/1657">let us know</a>. As a bonus, thanks to using <code>document.createElement</code>, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.</p></li>
<li><p>We received some amazing contributions from the community in this release, and we would like to highlight <a href="https://github.com/facebook/react/pull/5753">this pull request</a> by <a href="https://github.com/mwiencek">Michael Wiencek</a> in particular. Thanks to Michael’s work, React 15 no longer emits extra <code>&lt;span&gt;</code> nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.</p></li>
</ul>

<p>While this isn’t directly related to the release, we understand that in order to receive more community contributions like Michael’s, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing <a href="https://github.com/reactjs/core-notes">React core team weekly meeting notes</a> again. We also intend to introduce an RFC process inspired by <a href="https://github.com/emberjs/rfcs">Ember RFCs</a> so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog.</p>

<p>We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!</p>

<h2>Upgrade Guide</h2>

<p>As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.</p>

<p>If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases.</p>

<p>See the changelog below for more details.</p>

<h2>Installation</h2>

<p>We recommend using React from <code>npm</code> and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:</p>

<ul>
<li><code>npm install --save react react-dom</code></li>
</ul>

<p>Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the <code>NODE_ENV</code> environment variable to <code>production</code> to use the production build of React which does not include the development warnings and runs significantly faster.</p>

<p>If you can’t use <code>npm</code> yet, we provide pre-built browser builds for your convenience, which are also available in the <code>react</code> package on bower.</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-15.0.0.js">https://fb.me/react-15.0.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-15.0.0.min.js">https://fb.me/react-15.0.0.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-15.0.0.js">https://fb.me/react-with-addons-15.0.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-15.0.0.min.js">https://fb.me/react-with-addons-15.0.0.min.js</a><br></li>
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-15.0.0.js">https://fb.me/react-dom-15.0.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-15.0.0.min.js">https://fb.me/react-dom-15.0.0.min.js</a><br></li>
</ul>

<h2>Changelog</h2>

<h3>Major changes</h3>

<ul>
<li><h4><code>document.createElement</code> is in and <code>data-reactid</code> is out</h4>

<p>There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the <code>data-reactid</code> attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use <code>document.createElement</code> on initial render. Previously we would generate a large string of HTML and then set <code>node.innerHTML</code>. At the time, this was decided to be faster than using <code>document.createElement</code> for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using <code>createElement</code> we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we’ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.  </p>

<p><strong>Note:</strong> <code>data-reactid</code> is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter.  </p>

<p><small><a href="https://github.com/spicyj">@spicyj</a> in <a href="https://github.com/facebook/react/pull/5205">#5205</a></small></p></li>
<li><h4>No more extra <code>&lt;span&gt;</code>s</h4>

<p>Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra <code>&lt;span&gt;</code>s. For example, in our most basic example on the home page we render <code>&lt;div&gt;Hello {this.props.name}&lt;/div&gt;</code>, resulting in markup that contained 2 <code>&lt;span&gt;</code>s. Now we’ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it’s likely you are not impacted. However if you were targeting these <code>&lt;span&gt;</code>s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.  </p>

<p><small><a href="https://github.com/mwiencek">@mwiencek</a> in <a href="https://github.com/facebook/react/pull/5753">#5753</a></small></p></li>
<li><h4>Rendering <code>null</code> now uses comment nodes</h4>

<p>We’ve also made use of these comment nodes to change what <code>null</code> renders to. Rendering to <code>null</code> was a feature we added in React 0.11 and was implemented by rendering <code>&lt;noscript&gt;</code> elements. By rendering to comment nodes now, there’s a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of <code>:nth-child</code> selectors. React’s use of the <code>&lt;noscript&gt;</code> tag has always been considered an implementation detail of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.  </p>

<p><small><a href="https://github.com/spicyj">@spicyj</a> in <a href="https://github.com/facebook/react/pull/5451">#5451</a></small></p></li>
<li><h4>Functional components can now return <code>null</code> too</h4>

<p>We added support for <a href="/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components">defining stateless components as functions</a> in React 0.14. However, React 0.14 still allowed you to define a class component without extending <code>React.Component</code> or using <code>React.createClass()</code>, so <a href="https://github.com/facebook/react/issues/5355">we couldn’t reliably tell if your component is a function or a class</a>, and did not allow returning <code>null</code> from it. This issue is solved in React 15, and you can now return <code>null</code> from any component, whether it is a class or a function.  </p>

<p><small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/5884">#5884</a></small></p></li>
<li><h4>Improved SVG support</h4>

<p>All SVG tags are now fully supported. (Uncommon SVG tags are not present on the <code>React.DOM</code> element helper, but JSX and <code>React.createElement</code> work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please <a href="https://github.com/facebook/react/issues/1657">let us know in this issue</a>.  </p>

<p><small><a href="https://github.com/zpao">@zpao</a> in <a href="https://github.com/facebook/react/pull/6243">#6243</a></small></p></li>
</ul>

<h3>Breaking changes</h3>

<ul>
<li><h4>No more extra <code>&lt;span&gt;</code>s</h4>

<p>It’s worth calling out the DOM structure changes above again, in particular the change from <code>&lt;span&gt;</code>s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using <code>ReactDOM.renderToStaticMarkup</code> and comparing markup. Again, there were a very small number of changes that had to be made, but we don’t want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use <code>&lt;span&gt;</code>s in your <code>render</code> method.  </p>

<p><small><a href="https://github.com/mwiencek">@mwiencek</a> in <a href="https://github.com/facebook/react/pull/5753">#5753</a></small></p></li>
<li><h4><code>React.cloneElement()</code> now resolves <code>defaultProps</code></h4>

<p>We fixed a bug in <code>React.cloneElement()</code> that some components may rely on. If some of the <code>props</code> received by <code>cloneElement()</code> are <code>undefined</code>, it used to return an element with <code>undefined</code> values for those props. In React 15, we’re changing it to be consistent with <code>createElement()</code>. Now any <code>undefined</code> props passed to <code>cloneElement()</code> are resolved to the corresponding component’s <code>defaultProps</code>. Only one of our 20,000 React components was negatively affected by this so we feel comfortable releasing this change without keeping the old behavior for another release cycle.  </p>

<p><small><a href="https://github.com/truongduy134">@truongduy134</a> in <a href="https://github.com/facebook/react/pull/5997">#5997</a></small></p></li>
<li><h4><code>ReactPerf.getLastMeasurements()</code> is opaque</h4>

<p>This change won’t affect applications but may break some third-party tools. We are <a href="https://github.com/facebook/react/pull/6046">revamping <code>ReactPerf</code> implementation</a> and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of <code>ReactPerf.getLastMeasurements()</code> an opaque data structure that should not be relied upon.  </p>

<p><small><a href="https://github.com/gaearon">@gaearon</a> in <a href="https://github.com/facebook/react/pull/6286">#6286</a></small></p></li>
<li><h4>Removed deprecations</h4>

<p>These deprecations were introduced nine months ago in v0.14 with a warning and are removed:</p>

<ul>
<li>Deprecated APIs are removed from the <code>React</code> top-level export: <code>findDOMNode</code>, <code>render</code>, <code>renderToString</code>, <code>renderToStaticMarkup</code>, and <code>unmountComponentAtNode</code>. As a reminder, they are now available on <code>ReactDOM</code> and <code>ReactDOMServer</code>.<br>
<small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/5832">#5832</a></small></li>
<li>Deprecated addons are removed: <code>batchedUpdates</code> and <code>cloneWithProps</code>.<br>
<small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/5859">#5859</a>, <a href="https://github.com/zpao">@zpao</a> in <a href="https://github.com/facebook/react/pull/6016">#6016</a></small></li>
<li>Deprecated component instance methods are removed: <code>setProps</code>, <code>replaceProps</code>, and <code>getDOMNode</code>.<br>
<small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/5570">#5570</a></small></li>
<li>Deprecated CommonJS <code>react/addons</code> entry point is removed. As a reminder, you should use separate <code>react-addons-*</code> packages instead. This only applies if you use the CommonJS builds.<br>
<small><a href="https://github.com/gaearon">@gaearon</a> in <a href="https://github.com/facebook/react/pull/6285">#6285</a></small></li>
<li>Passing <code>children</code> to void elements like <code>&lt;input&gt;</code> was deprecated, and now throws an error.<br>
<small><a href="https://github.com/jonhester">@jonhester</a> in <a href="https://github.com/facebook/react/pull/3372">#3372</a></small></li>
<li>React-specific properties on DOM <code>refs</code> (e.g. <code>this.refs.div.props</code>) were deprecated, and are removed now.<br>
<small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/5495">#5495</a></small></li>
</ul></li>
</ul>

<h3>New deprecations, introduced with a warning</h3>

<p>Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.</p>

<ul>
<li><p><code>LinkedStateMixin</code> and <code>valueLink</code> are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: <a href="https://www.npmjs.com/package/react-linked-input">react-linked-input</a>.<br>
<small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/6127">#6127</a></small></p></li>
<li><p>Future versions of React will treat <code>&lt;input value={null}&gt;</code> as a request to clear the input. However, React 0.14 has been ignoring <code>value={null}</code>. React 15 warns you on a <code>null</code> input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass <code>undefined</code> to make the input uncontrolled.<br>
<small><a href="https://github.com/antoaravinth">@antoaravinth</a> in <a href="https://github.com/facebook/react/pull/5048">#5048</a></small></p></li>
<li><p><code>ReactPerf.printDOM()</code> was renamed to <code>ReactPerf.printOperations()</code>, and <code>ReactPerf.getMeasurementsSummaryMap()</code> was renamed to <code>ReactPerf.getWasted()</code>.<br>
<small><a href="https://github.com/gaearon">@gaearon</a> in <a href="https://github.com/facebook/react/pull/6287">#6287</a></small></p></li>
</ul>

<h3>New helpful warnings</h3>

<ul>
<li><p>If you use a minified copy of the <em>development</em> build, React DOM kindly encourages you to use the faster production build instead.<br>
<small><a href="https://github.com/spicyj">@spicyj</a> in <a href="https://github.com/facebook/react/pull/5083">#5083</a></small></p></li>
<li><p>React DOM: When specifying a unit-less CSS value as a string, a future version will not add <code>px</code> automatically. This version now warns in this case (ex: writing <code>style={{width: &#39;300&#39;}}</code>. Unitless <em>number</em> values like <code>width: 300</code> are unchanged.<br>
<small><a href="https://github.com/pluma">@pluma</a> in <a href="https://github.com/facebook/react/pull/5140">#5140</a></small></p></li>
<li><p>Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.<br>
<small><a href="https://github.com/kentcdodds">@kentcdodds</a> in <a href="https://github.com/facebook/react/pull/5940">#5940</a> and <a href="https://github.com/koba04">@koba04</a> in <a href="https://github.com/facebook/react/pull/5947">#5947</a></small></p></li>
<li><p>Elements will now warn when attempting to read <code>ref</code> and <code>key</code> from the props.<br>
<small><a href="https://github.com/prometheansacrifice">@prometheansacrifice</a> in <a href="https://github.com/facebook/react/pull/5744">#5744</a></small></p></li>
<li><p>React will now warn if you pass a different <code>props</code> object to <code>super()</code> in the constructor.<br>
<small><a href="https://github.com/prometheansacrifice">@prometheansacrifice</a> in <a href="https://github.com/facebook/react/pull/5346">#5346</a></small></p></li>
<li><p>React will now warn if you call <code>setState()</code> inside <code>getChildContext()</code>.<br>
<small><a href="https://github.com/raineroviir">@raineroviir</a> in <a href="https://github.com/facebook/react/pull/6121">#6121</a></small></p></li>
<li><p>React DOM now attempts to warn for mistyped event handlers on DOM elements, such as <code>onclick</code> which should be <code>onClick</code>.<br>
<small><a href="https://github.com/ali">@ali</a> in <a href="https://github.com/facebook/react/pull/5361">#5361</a></small></p></li>
<li><p>React DOM now warns about <code>NaN</code> values in <code>style</code>.<br>
<small><a href="https://github.com/jontewks">@jontewks</a> in <a href="https://github.com/facebook/react/pull/5811">#5811</a></small></p></li>
<li><p>React DOM now warns if you specify both <code>value</code> and <code>defaultValue</code> for an input.<br>
<small><a href="https://github.com/mgmcdermott">@mgmcdermott</a> in <a href="https://github.com/facebook/react/pull/5823">#5823</a></small></p></li>
<li><p>React DOM now warns if an input switches between being controlled and uncontrolled.<br>
<small><a href="https://github.com/TheBlasfem">@TheBlasfem</a> in <a href="https://github.com/facebook/react/pull/5864">#5864</a></small></p></li>
<li><p>React DOM now warns if you specify <code>onFocusIn</code> or <code>onFocusOut</code> handlers as they are unnecessary in React.<br>
<small><a href="https://github.com/jontewks">@jontewks</a> in <a href="https://github.com/facebook/react/pull/6296">#6296</a></small></p></li>
<li><p>React now prints a descriptive error message when you pass an invalid callback as the last argument to <code>ReactDOM.render()</code>, <code>this.setState()</code>, or <code>this.forceUpdate()</code>.<br>
<small><a href="https://github.com/conorhastings">@conorhastings</a> in <a href="https://github.com/facebook/react/pull/5193">#5193</a> and <a href="https://github.com/gaearon">@gaearon</a> in <a href="https://github.com/facebook/react/pull/6310">#6310</a></small></p></li>
<li><p>Add-Ons: <code>TestUtils.Simulate()</code> now prints a helpful message if you attempt to use it with shallow rendering.<br>
<small><a href="https://github.com/conorhastings">@conorhastings</a> in <a href="https://github.com/facebook/react/pull/5358">#5358</a></small></p></li>
<li><p>PropTypes: <code>arrayOf()</code> and <code>objectOf()</code> provide better error messages for invalid arguments.<br>
<small><a href="https://github.com/chicoxyzzy">@chicoxyzzy</a> in <a href="https://github.com/facebook/react/pull/5390">#5390</a></small></p></li>
</ul>

<h3>Notable bug fixes</h3>

<ul>
<li><p>Fixed multiple small memory leaks.<br>
<small><a href="https://github.com/spicyj">@spicyj</a> in <a href="https://github.com/facebook/react/pull/4983">#4983</a> and <a href="https://github.com/victor-homyakov">@victor-homyakov</a> in <a href="https://github.com/facebook/react/pull/6309">#6309</a></small></p></li>
<li><p>Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.<br>
<small><a href="https://github.com/jquense">@jquense</a> in <a href="https://github.com/facebook/react/pull/4051">#4051</a></small></p></li>
<li><p>The <code>componentWillReceiveProps()</code> lifecycle method is now consistently called when <code>context</code> changes.<br>
<small><a href="https://github.com/milesj">@milesj</a> in <a href="https://github.com/facebook/react/pull/5787">#5787</a></small></p></li>
<li><p><code>React.cloneElement()</code> doesn’t append slash to an existing <code>key</code> when used inside <code>React.Children.map()</code>.<br>
<small><a href="https://github.com/ianobermiller">@ianobermiller</a> in <a href="https://github.com/facebook/react/pull/5892">#5892</a></small></p></li>
<li><p>React DOM now supports the <code>cite</code> and <code>profile</code> HTML attributes.<br>
<small><a href="https://github.com/AprilArcus">@AprilArcus</a> in <a href="https://github.com/facebook/react/pull/6094">#6094</a> and <a href="https://github.com/saiichihashimoto">@saiichihashimoto</a> in <a href="https://github.com/facebook/react/pull/6032">#6032</a></small></p></li>
<li><p>React DOM now supports <code>cssFloat</code>, <code>gridRow</code> and <code>gridColumn</code> CSS properties.<br>
<small><a href="https://github.com/stevenvachon">@stevenvachon</a> in <a href="https://github.com/facebook/react/pull/6133">#6133</a> and  <a href="https://github.com/mnordick">@mnordick</a> in <a href="https://github.com/facebook/react/pull/4779">#4779</a></small></p></li>
<li><p>React DOM now correctly handles <code>borderImageOutset</code>, <code>borderImageWidth</code>, <code>borderImageSlice</code>, <code>floodOpacity</code>, <code>strokeDasharray</code>, and <code>strokeMiterlimit</code> as unitless CSS properties.<br>
<small><a href="https://github.com/rofrischmann">@rofrischmann</a> in <a href="https://github.com/facebook/react/pull/6210">#6210</a> and <a href="https://github.com/facebook/react/pull/6270">#6270</a></small></p></li>
<li><p>React DOM now supports the <code>onAnimationStart</code>, <code>onAnimationEnd</code>, <code>onAnimationIteration</code>, <code>onTransitionEnd</code>, and <code>onInvalid</code> events. Support for <code>onLoad</code> has been added to <code>object</code> elements.<br>
<small><a href="https://github.com/tomduncalf">@tomduncalf</a> in <a href="https://github.com/facebook/react/pull/5187">#5187</a>,  <a href="https://github.com/milesj">@milesj</a> in <a href="https://github.com/facebook/react/pull/6005">#6005</a>, and <a href="https://github.com/ara4n">@ara4n</a> in <a href="https://github.com/facebook/react/pull/5781">#5781</a></small></p></li>
<li><p>React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: <code>href={null}</code>) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.<br>
<small><a href="https://github.com/syranide">@syranide</a> in <a href="https://github.com/facebook/react/pull/1510">#1510</a></small></p></li>
<li><p>React DOM does not mistakingly coerce <code>children</code> to strings for Web Components.<br>
<small><a href="https://github.com/jimfb">@jimfb</a> in <a href="https://github.com/facebook/react/pull/5093">#5093</a></small></p></li>
<li><p>React DOM now correctly normalizes SVG <code>&lt;use&gt;</code> events.<br>
<small><a href="https://github.com/edmellum">@edmellum</a> in <a href="https://github.com/facebook/react/pull/5720">#5720</a></small></p></li>
<li><p>React DOM does not throw if a <code>&lt;select&gt;</code> is unmounted while its <code>onChange</code> handler is executing.<br>
<small><a href="https://github.com/sambev">@sambev</a> in <a href="https://github.com/facebook/react/pull/6028">#6028</a></small></p></li>
<li><p>React DOM does not throw in Windows 8 apps.<br>
<small><a href="https://github.com/Andrew8xx8">@Andrew8xx8</a> in <a href="https://github.com/facebook/react/pull/6063">#6063</a></small></p></li>
<li><p>React DOM does not throw when asynchronously unmounting a child with a <code>ref</code>.<br>
<small><a href="https://github.com/yiminghe">@yiminghe</a> in <a href="https://github.com/facebook/react/pull/6095">#6095</a></small></p></li>
<li><p>React DOM no longer forces synchronous layout because of scroll position tracking.<br>
<small><a href="https://github.com/syranide">@syranide</a> in <a href="https://github.com/facebook/react/pull/2271">#2271</a></small></p></li>
<li><p><code>Object.is</code> is used in a number of places to compare values, which leads to fewer false positives, especially involving <code>NaN</code>. In particular, this affects the <code>shallowCompare</code> add-on.<br>
<small><a href="https://github.com/chicoxyzzy">@chicoxyzzy</a> in <a href="https://github.com/facebook/react/pull/6132">#6132</a></small></p></li>
<li><p>Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation.<br>
<small><a href="https://github.com/antoaravinth">@antoaravinth</a> in <a href="https://github.com/facebook/react/pull/5209">#5209</a></small></p></li>
</ul>

<h3> Other improvements</h3>

<ul>
<li><p>React now uses <code>loose-envify</code> instead of <code>envify</code> so it installs fewer transitive dependencies.<br>
<small><a href="https://github.com/qerub">@qerub</a> in <a href="https://github.com/facebook/react/pull/6303">#6303</a></small></p></li>
<li><p>Shallow renderer now exposes <code>getMountedInstance()</code>.<br>
<small><a href="https://github.com/glenjamin">@glenjamin</a> in <a href="https://github.com/facebook/react/pull/4918">#4918</a></small></p></li>
<li><p>Shallow renderer now returns the rendered output from <code>render()</code>.<br>
<small><a href="https://github.com/simonewebdesign">@simonewebdesign</a> in <a href="https://github.com/facebook/react/pull/5411">#5411</a></small></p></li>
<li><p>React no longer depends on ES5 <em>shams</em> for <code>Object.create</code> and <code>Object.freeze</code> in older environments. It still, however, requires ES5 <em>shims</em> in those environments.<br>
<small><a href="https://github.com/dgreensp">@dgreensp</a> in <a href="https://github.com/facebook/react/pull/4959">#4959</a></small></p></li>
<li><p>React DOM now allows <code>data-</code> attributes with names that start with numbers.<br>
<small><a href="https://github.com/nLight">@nLight</a> in <a href="https://github.com/facebook/react/pull/5216">#5216</a></small></p></li>
<li><p>React DOM adds a new <code>suppressContentEditableWarning</code> prop for components like <a href="https://facebook.github.io/draft-js/">Draft.js</a> that intentionally manage <code>contentEditable</code> children with React.<br>
<small><a href="https://github.com/mxstbr">@mxstbr</a> in <a href="https://github.com/facebook/react/pull/6112">#6112</a></small></p></li>
<li><p>React improves the performance for <code>createClass()</code> on complex specs.<br>
<small><a href="https://github.com/spicyj">@spicyj</a> in <a href="https://github.com/facebook/react/pull/5550">#5550</a></small></p></li>
</ul>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a>

</h1>

<p class="meta">
  March 29, 2016
  by
  
    
      <a href="https://twitter.com/dan_abramov">Dan Abramov</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>We have already released two release candidates for React 15, and the final version is coming soon.</p>

<p>However <a href="https://github.com/iancmyers">Ian Christian Myers</a> discovered a memory leak related to server rendering in React 0.14 and <a href="https://github.com/facebook/react/pull/6060">contributed a fix</a>. While this memory leak has already been fixed in a different way in the React 15 release candidates, we decided to cut another 0.14 release that contains just this fix.</p>

<p>The release is now available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.14.8.js">https://fb.me/react-0.14.8.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.14.8.min.js">https://fb.me/react-0.14.8.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.14.8.js">https://fb.me/react-with-addons-0.14.8.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.14.8.min.js">https://fb.me/react-with-addons-0.14.8.min.js</a><br></li>
<li><strong>React DOM</strong> (include React in the page before React DOM)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-0.14.8.js">https://fb.me/react-dom-0.14.8.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-0.14.8.min.js">https://fb.me/react-dom-0.14.8.min.js</a><br></li>
<li><strong>React DOM Server</strong> (include React in the page before React DOM Server)<br>
Dev build with warnings: <a href="https://fb.me/react-dom-server-0.14.8.js">https://fb.me/react-dom-server-0.14.8.js</a><br>
Minified build for production: <a href="https://fb.me/react-dom-server-0.14.8.min.js">https://fb.me/react-dom-server-0.14.8.min.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.14.8</code> of the <code>react</code>, <code>react-dom</code>, and addons packages on npm and the <code>react</code> package on bower.</p>

<hr>

<h2>Changelog</h2>

<h3>React</h3>

<ul>
<li>Fixed memory leak when rendering on the server</li>
</ul>

</div>



      </div>
    

    <div class="pagination">
      
        <a href="/react/blog/" class="previous">
          &laquo; Previous Page
        </a>
      
      
        <a href="/react/blog/page3/" class="next">
          Next Page &raquo;
        </a>
      
    </div>
  </div>
</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/react/" class="nav-home">
    </a>
    <div>
      <h5><a href="/react/docs/">Docs</a></h5>
      <a href="/react/docs/hello-world.html">Quick Start</a>
      <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/react/tutorial/tutorial.html">Tutorial</a>
      <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Resources</a></h5>
      <a href="/react/community/conferences.html">Conferences</a>
      <a href="/react/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/react/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/react/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/react/js/anchor-links.js"></script>
  <script>
    

    

    
    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
